<template>
	<view class="container">
		<!-- 未登录状态 -->
		<view class="not-login-content" v-if="!isLoggedIn">
			<image src="/static/tiwen.gif" class="logo" mode="aspectFit" />
			<text class="title">登录后体验更多功能</text>
			<text class="desc">登录后可以收藏游戏、发布内容、参与互动</text>
			<view class="login-btn" @click="goToLogin">立即登录</view>
		</view>
		
		<!-- 已登录状态 -->
		<template v-else>
			<!-- 用户信息头部 -->
			<view class="user-header">
				<view class="user-info-box">
					<image class="user-avatar" src="/static/tiwen.gif" mode="aspectFill" />
					<view class="user-basic-info">
						<view class="name-id">
							<text class="user-name">{{ username }}</text>
							<text class="user-id">ID: {{ userId }}</text>
						</view>
						<view class="signature-box">
							<text class="user-signature">{{ signature }}</text>
							<text class="edit-icon">✎</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 数据统计 -->
			<view class="stats-bar">
				<view class="stat-item">
					<text class="stat-num">{{ gameCount }}</text>
					<text class="stat-label">玩过</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-num">{{ followCount }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-num">{{ fansCount }}</text>
					<text class="stat-label">粉丝</text>
				</view>
			</view>
			<!-- 最近游戏 -->
			<view class="recent-games-section">
				<text class="section-title">最近游戏</text>
				<scroll-view class="recent-games" scroll-x="true">
					<view class="game-item" v-for="game in recentGames" :key="game.id" @click="navigateToGameDetail(game.id)">
						<image :src="game.logo" class="game-logo" mode="aspectFill" />
						<text class="game-name">{{ game.name }}</text>
						<text class="play-time">{{ game.playTime }}小时</text>
					</view>
				</scroll-view>
			</view>
			<!-- 功能列表 -->
			<view class="function-list">
				<!-- 游戏中心 -->
				<view class="function-group">
					<view class="function-item" v-for="item in functionGroups[0].items" :key="item.name" @click="navigateTo(item.route)">
						<view class="item-left">
							<text :class="['iconfont', item.icon]"></text>
							<text class="item-name">{{ item.name }}</text>
						</view>
						<view class="item-right">
							<text class="item-count" v-if="item.count">{{ item.count }}</text>
							<text class="arrow-right">›</text>
						</view>
					</view>
				</view>
				<!-- 社区互动 -->
				<view class="function-group">
					<view class="function-item" v-for="item in functionGroups[1].items" :key="item.name" @click="navigateTo(item.route)">
						<view class="item-left">
							<text :class="['iconfont', item.icon]"></text>
							<text class="item-name">{{ item.name }}</text>
						</view>
						<view class="item-right">
							<text class="item-count" v-if="item.count">{{ item.count }}</text>
							<text class="new-message" v-if="item.hasNew"></text>
							<text class="arrow-right">›</text>
						</view>
					</view>
				</view>
				<!-- 设置 -->
				<view class="function-group">
					<view class="function-item" v-for="item in functionGroups[2].items" :key="item.name" @click="navigateTo(item.route)">
						<view class="item-left">
							<text :class="['iconfont', item.icon]"></text>
							<text class="item-name">{{ item.name }}</text>
						</view>
						<view class="item-right">
							<text class="arrow-right">›</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
import { games } from '../../utils/gameData.js';
export default {
	data() {
		return {
			isLoggedIn: false,
			username: '张三',
			userId: '10086',
			signature: '这个人很懒，什么都没留下',
			gameCount: 12,
			followCount: 66,
			fansCount: 88,
			collectionCount: 23,
			achievementCount: 15,
			postsCount: 8,
			hasNewMessage: true,
			recentGames: [], // 初始化为空数组
			functionGroups: [
				{
					title: '游戏中心',
					items: [
						{
							name: '我的收藏',
							icon: 'icon-collection',
							route: 'collection',
							count: 23
						},
						{
							name: '游戏记录',
							icon: 'icon-history',
							route: 'history'
						},
						{
							name: '我的成就',
							icon: 'icon-achievement',
							route: 'achievement',
							count: 15
						}
					]
				},
				{
					title: '社区互动',
					items: [
						{
							name: '我的帖子',
							icon: 'icon-posts',
							route: 'posts',
							count: 8
						},
						{
							name: '消息中心',
							icon: 'icon-message',
							route: 'messages',
							hasNew: true
						}
					]
				},
				{
					title: '设置',
					items: [
						{
							name: '设置',
							icon: 'icon-settings',
							route: 'settings'
						}
					]
				}
			]
		}
	},
	onShow() {
		// 每次显示页面时检查登录状态
		this.checkLoginStatus();
	},
	methods: {
		checkLoginStatus() {
			const isLoggedIn = uni.getStorageSync('isLoggedIn');
			this.isLoggedIn = isLoggedIn;
			if (isLoggedIn) {
				// 获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				this.username = userInfo.username;
				this.userId = userInfo.userId;
				// 获取最近游戏数据
				this.recentGames = games.slice(0, 3).map(game => ({
					id: game.game_id,
					name: game.game_name,
					logo: game.game_logo,
					playTime: (Math.random() * 5).toFixed(1)
				}));
			}
		},
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		},
		navigateTo(page) {
			// 对于消息中心做特殊处理
			if (page === 'messages') {
				uni.navigateTo({
					url: `/pages/my/messages/messages`
				});
			} else {
				uni.navigateTo({
					url: `/pages/my/${page}/${page}`
				});
			}
		}
	}
}
</script>
<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
}
.user-header {
	background: #6E6C89;
	padding: 20px 15px;
	margin-bottom: 12px;
	border-radius: 0 0 25px 25px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transform: translateZ(0);
	transition: transform 0.15s ease;
}
.user-header:active {
	transform: scale(0.98) translateZ(0);
}
.user-avatar {
	width: 65px;
	height: 65px;
	border-radius: 33px;
	border: 3px solid #9796B8;
	margin-right: 12px;
	transition: all 0.3s ease;
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
.stats-bar {
	background: #2D2D44;
	border-radius: 16px;
	margin: 0 12px;
	padding: 15px 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid #4D4C6D;
	transition: transform 0.15s ease;
}
.stats-bar:active {
	transform: translateY(2px);
}
.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	transition: transform 0.15s ease;
}
.stat-item:active {
	transform: scale(0.95);
}
.stat-num {
	font-size: 20px;
	font-weight: 600;
	color: #9796B8;
	margin-bottom: 2px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.stat-label {
	font-size: 11px;
	color: #6E6C89;
}
.function-list {
	margin-top: 15px;
	background: #2D2D44;
}
.function-group {
	margin-bottom: 10px;
}
.function-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.2);
}
.function-item:active {
	background: rgba(77, 76, 109, 0.3);
}
.item-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.item-name {
	font-size: 15px;
	color: #9796B8;
}
.item-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.item-count {
	font-size: 12px;
	color: #2D2D44;
	background: #9796B8;
	padding: 1px 6px;
	border-radius: 8px;
}
.new-message {
	width: 6px;
	height: 6px;
	background: #9796B8;
	border-radius: 50%;
	animation: glow 1.5s infinite;
}
.arrow-right {
	font-size: 18px;
	color: #6E6C89;
}
.iconfont {
	font-size: 18px;
	color: #9796B8;
}
/* 最近游戏部分样式 */
.recent-games-section {
	margin: 15px 0;
	padding: 15px;
	background: #2D2D44;
}
.section-title {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 15px;
}
.recent-games {
	white-space: nowrap;
}
.game-item {
	display: inline-block;
	margin-right: 15px;
	text-align: center;
}
.game-logo {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	margin-bottom: 6px;
}
.game-name {
	font-size: 12px;
	color: #9796B8;
	margin-bottom: 2px;
	display: block;
}
.play-time {
	font-size: 10px;
	color: #6E6C89;
}
.stat-divider {
	width: 1px;
	height: 25px;
	background: #4D4C6D;
}
/* 未登录状态的样式 */
.not-login-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1E1E2E;
	text-align: center;
	padding: 20px;
}

.logo {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	margin-bottom: 20px;
}

.title {
	font-size: 20px;
	color: #9796B8;
	font-weight: bold;
	margin-bottom: 10px;
}

.desc {
	font-size: 14px;
	color: #6E6C89;
	margin-bottom: 30px;
}

.login-btn {
	background: #9796B8;
	color: #1E1E2E;
	padding: 12px 30px;
	border-radius: 25px;
	font-size: 16px;
}
</style> 
